<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Home</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="author" content="" />
		<!-- Facebook and Twitter integration -->
		<meta name="twitter:title" content="" />
		<meta name="twitter:image" content="" />
		<meta name="twitter:url" content="" />
		<meta name="twitter:card" content="" />

		<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">

		<!-- Animate.css -->
		<link rel="stylesheet" href="css/other/animate.css">
		<!-- Icomoon Icon Fonts-->
		<link rel="stylesheet" href="css/other/icomoon.css">
		<!-- Themify Icons-->
		<link rel="stylesheet" href="css/other/themify-icons.css">
		<!-- Bootstrap  -->
		<link rel="stylesheet" href="css/other/bootstrap.css">
		<link rel="stylesheet" href="css/other/bootstrap-select.min.css" />
		<!-- Magnific Popup -->
		<link rel="stylesheet" href="css/other/magnific-popup.css">

		<!-- Owl Carousel  -->
		<link rel="stylesheet" href="css/other/owl.carousel.min.css">
		<link rel="stylesheet" href="css/other/owl.theme.default.min.css">

		<!-- Theme style  -->
		<link rel="stylesheet" href="css/other/style.css">

		<!-- Modernizr JS -->
		<script src="js/other/modernizr-2.6.2.min.js"></script>
		<!-- FOR IE9 below -->
		<!--[if lt IE 9]>
	<script src="js/other/respond.min.js"></script>
	<![endif]-->
		<!-- jQuery -->
		<script src="js/other/jquery.min.js"></script>
		<!-- jQuery Easing -->
		<script src="js/other/jquery.easing.1.3.js"></script>
		<!-- Bootstrap -->
		<script src="js/other/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/other/bootstrap-select.min.js"></script>
		<!-- Waypoints -->
		<script src="js/other/jquery.waypoints.min.js"></script>
		<!-- Carousel -->
		<script src="js/other/owl.carousel.min.js"></script>
		<!-- countTo -->
		<script src="js/other/jquery.countTo.js"></script>
		<!-- Magnific Popup -->
		<script src="js/other/jquery.magnific-popup.min.js"></script>
		<script src="js/other/magnific-popup-options.js"></script>
		<!-- Main -->
		<script src="js/other/main.js"></script>

	</head>

	<body>

		<div class="gtco-loader"></div>

		<div id="page">
			<div class="page-inner">
				<nav class="gtco-nav" role="navigation">
					<div class="gtco-container">

						<div class="row">
							<div class="col-sm-4 col-xs-12">
								<div id="gtco-logo">
									<a href="Login.jsp">Home <em>.</em></a>
								</div>
							</div>
							
						</div>

					</div>
				</nav>
			</div>

			<header id="gtco-header" class="gtco-cover" role="banner" style="background-image: url(images/a4.jpg)">
				<div class="overlay"></div>
				<div class="gtco-container">
					<div class="row">
						<div class="col-md-12 col-md-offset-0 text-left">
							<div class="row row-mt-12em">
								<div class="col-md-6 col-md-push-3 animate-box" style="margin-top: 6.5em;" data-animate-effect="fadeInRight">
									<div class="form-wrap" style="opacity:0.7;text-align: center;letter-spacing: 5px;line-height: 190%;">
										<div class="tab">
											<ul class="tab-menu">
												<li style="width: 100%;">
													<div style="line-height:200%;height:55px;font-weight:900;font-size:25px;font-family: 'Comic Sans MS';color: #ffefef;background-color: #aca7a5;border-radius: 5px 5px 0 0;box-shadow: #AFD9EE 0px 0px 5px 5px">斗地主注册</div>
												</li>
											</ul>
											<div class="tab-content" style="font-size: 20px;">
												<div class="tab-content-inner active" data-content="login">
													<form action="RegisterServlet" method="post">
														<div class="row form-group">
															<div class="col-md-12">
																<label for="studentno">账号</label>
																<input type="text" class="form-control" name="account" id="account" pattern="[0-9]{6,}" required oninvalid="setCustomValidity('请输入长度超过六位数字的账号')" oninput="setCustomValidity('')">

															</div>
														</div>
														<div class="row form-group">
															<div class="col-md-12">
																<label for="name">呢称</label>
																<input type="text" class="form-control" name="nickname" id="nickname" pattern="[A-Za-z]{1,}" required oninvalid="setCustomValidity('呢称不能为中文')" oninput="setCustomValidity('')">
															</div>
														</div>
														<div class="row form-group">
															<div class="col-md-12">
																<label for="class">密码</label>
																<input type="text" class="form-control" name="password" id="password"  required oninvalid="setCustomValidity('请输入密码')" oninput="setCustomValidity('')">
															</div>

														</div>
														<div class="row form-group" >
															<label class="radio-inline">
      <input type="radio"  value="0" name="sex" checked>&nbsp;男生
    </label>
															<label class="radio-inline" style="padding-left:30px">
      <input type="radio"  value="1" name="sex">&nbsp;女生
    </label>
														</div>

														<div class="row form-group">
															<div class="col-md-12">
																<input type="submit" class="btn btn-primary" value="点击注册">
															</div>
														</div>
													</form>
													
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</header>
		</div>

	</body>

</html>